<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/mui.picker.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">基于mui.PopPicker的可多选的底部弹出组件</h1>
		</header>
		<div class="mui-content">
			<a id="popPicker" href="javascript:void(0);" class="mui-btn mui-btn-outlined" 
			style="margin: 30px 30%;">mui.custom.PopPicker</a>
		</div>
	</body>
	
	<script src="../js/mui.min.js"></script>
	<script src="../js/mui.picker2.js"></script>
	<script src="../js/mui.poppicker.js"></script>
	
	<script type="text/javascript">
		var pickerData = [
			{'value': 'v1', 'text': '测试1'},
			{'value': 'v2', 'text': '测试2'},
			{'value': 'v3', 'text': '测试3'},
			{'value': 'v5', 'text': '测试5'},
			{'value': 'v6', 'text': '测试6'},
			{'value': 'v7', 'text': '测试7'},
		]
		mui.init();
		
		(function(doc) {
			// 初始化picker
			var picker = new mui.PopPicker();
			picker.setData(pickerData)
			
			mui('.mui-pciker-rule.mui-pciker-rule-ft')[0].style.display = 'none';
			
			document.getElementById('popPicker').addEventListener('tap', function() {
				picker.show(function() {
					var vals = []
					// 获取复选框选中的值
					mui.each(document.querySelectorAll('input[name=pickerCheckbox]'), function(i, ele) {
						if (ele.checked) {
							vals[i] = ele.value
						}
					})
					if (!vals || vals.length <= 0) {
						mui.toast('请选择')
						return
					}
				})
			}, false)
		}(document));
	</script>
</html>
